<template>
  <div>
    <ylheader :leftsvg='true' :title="'填写提货信息'" ></ylheader>
    <div class="title">请输入您的提货信息</div>
    <div class="detail">
      <div >
        <table cellspacing='0' cellpadding='0'>
          <tr>
            <td class="first b-left">提货人</td>
            <td>
              <input type="text" class="textinput" v-model="name">
            </td>
          </tr>
          <tr>
            <td class="first b-left">手机号</td>
            <td>  <input type="text" class="textinput" v-model="phone" maxlength="11"></td>
          </tr>
        </table>

      </div>
    </div>
    <div class="add-h v-c " >
        <span class="yl-table-add add-icon"></span>
        <span class="addresscontent">提货地址:&nbsp;&nbsp;{{typeValue}}</span>
    </div>
    <div class="button a-c" >
      <input name="input1" type="submit" value="提交" class="submitaddress" @click="submit"/>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
export default {
name:"shipaddress",
  data(){
      return{
        name:"",
        phone:"",
        list:[],
        typeValue:this.$route.query.typeValue,
      }
  },
  components:{
      api,
      ylheader,
  },
  mounted(){
   
  },
  methods:{
    submit(){
      let reg =   /^1[3-9]\d{9}$/;
      if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      } else if (this.phone == "") {
        this.$toast("请输入电话号码"); 
        return;
      }else if (!reg.test(this.phone)) {
        this.$toast("请输入正确的手机号");
        return;
      }else{
        let tempData = {
            token: localStorage.getItem("token"),
            id:this.$route.query.id ,
            name:this.name,
            mobile:this.phone,
        };
        api.saveaddress(tempData).then(res=>{
            if (res.success) {
              this.$router.go(-1);
            } else {
              this.$toast(res.msg);
            }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.add-h{
height: 0.96rem;
padding: 0 0.3rem;
background: #ffffff;
}
.add-icon{
  padding: 0.04rem 0.1rem 0 0;
  color: #fb725f;
  font-size: 0.34rem;
}
.addresscontent{
  font-size: 0.26rem;
  color: #777;
}
.textinput{
    height: 100%;
    line-height: 100%;
    margin-left: 3.813333rem;
    margin: 0px;
    padding: 0px;
    padding-left: 0.2rem;
    width: 100%;
    font-size: 0.28rem;
    border: none;
    outline: none;
}
.title{
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
}
.detail{
  padding: 0 0.3rem;
  height: 2rem;
  background: #ffffff;
  div{
    width: 100%;
    height: 100%;
    padding-top: 0.3rem;
  }
  table{
      width: 100%;
      height: 100%;
     border-top: 1px solid #e6e6e6;
    .first{
      width: 2rem;
    }
    td{
        color: #444444;
        text-align: center;
        border-bottom:1px solid #e6e6e6;
        border-right:1px solid #e6e6e6;
      }
      td:last-child{
        border-top-right-radius: 3px;
      }
      td:first-child{
          border-top-left-radius: 3px;
      }
    }
    tr:last-child{
      td:last-child{
        border-bottom-right-radius: 3px;
      }
      td:first-child{
        border-bottom-left-radius: 3px;
      }
    }
}
.b-left{
  border-left: 1px solid #e6e6e6;
}
.address{
    padding: 0 0.3rem;
  background: #ffffff;
}
.submitaddress {
  border: none; 
  margin-top: 0.3rem;
  font-size: 0.4rem;
  width: 3.47rem;
  height: 0.84rem;
  background: #fb685b;
  border-radius: 5px;
  color: #fffff0;
  -webkit-appearance: none
}
.button{
  height: 1rem;
}
</style>


